<style type="text/css">

</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <div class="layui-btn-container">
        <button class="layui-btn" type="button" lay-active="generateSecret">生成密钥</button>
        <button class="layui-btn" type="button" lay-active="loadQrcodeImg">获取二维码</button>
        <button class="layui-btn" type="button" lay-active="qrScanStatus">二维码扫码状态</button>
        <button class="layui-btn" type="button" lay-active="toEncrypt">加密</button>
    </div>
    <div class="layui-row">
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">明文密钥</label>
            <div class="layui-input-block">
                <input type="text" id="plainText" name="plainText" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">密文密钥</label>
            <div class="layui-input-block">
                <input type="text" id="cipherText" name="cipherText" readonly="readonly" class="layui-input"/>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <img id="qrImg" src="" alt=""/>
    </div>
</div>
<script type="text/javascript">
    layui.use(['util'], function () {
        let util = layui.util;

        let accessResult;
        let actionId;

        let active = {
            generateSecret: function () {
                $('#plainText').val(active.randomStr(32));
            },
            loadQrcodeImg: function () {
                request.bodyAjax(api.qrCodeImg, {
                    qrcodeType: 'ENCODE',
                    extAttrs: {}
                }, function (res) {
                    if (res.success && res.status === 200) {
                        let $qrImg = $('#qrImg');
                        $qrImg.attr('src', api.viewCodeImg + res.data + "?n=" + new Date().getTime());
                        actionId = res.data;
                    }
                });
            },
            qrScanStatus: function (noToast, func) {
                request.bodyAjax(api.scanResult, {
                    actionId: actionId
                }, function (res) {
                    if (res.success && res.status === 200 && res.data !== false) {
                        accessResult = res.data;
                        layer.alert("二维码已被扫描, 详细信息请查看控制台");
                        console.log(accessResult);
                    } else {
                        layer.msg("没有查询到已扫描状态");
                    }
                    if (func) {
                        func();
                    }
                });
            },
            randomStr: function (len) {
                len = len || 32;
                let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
                let maxPos = chars.length;
                let pwd = [];
                for (let i = 0; i < len; i++) {
                    pwd.push(chars.charAt(Math.floor(Math.random() * maxPos)));
                }
                return pwd.join('');
            },
            toEncrypt: function () {
                if (accessResult) {
                    let accessToken = accessResult.accessToken;
                    accessResult.logicParam = {
                        accessToken: accessToken,
                        plainText: $('#plainText').val()
                    }
                    request.bodyAjax(api.toEncrypt, accessResult, function (res) {
                        if (res.success && res.status === 200) {
                            $('#cipherText').val(res.data);
                        } else {
                            layer.alert(res.message, {"icon": 2});
                        }
                    });
                    return;
                }
                layer.alert("未能获取扫码信息");
            }
        };

        // layui的btn单独添加点击事件
        util.event('lay-active', active);

    });
</script>
